{% extends "baseMenuMapa.html" %}
{% load crispy_forms_tags %}

{% block extras %}
<script src="../Archivos/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../Archivos/js/ZeroClipboard.js"></script>
<script type="text/javascript" charset="utf-8" src="../Archivos/js/TableTools.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../Archivos/js/dataTables.bootstrap.js"></script>

<link href="../Archivos/css/dataTables.bootstrap.css" rel="stylesheet">

<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
				$('#stopList').dataTable( {
					"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
					"oTableTools": {
						"sRowSelect": "single",
						"aButtons": [
									]
					}
				} );
				
			$("#stopList").click(function() {
				var oTT = TableTools.fnGetInstance( 'stopList' );
			    var aSelectedTrs = oTT.fnGetSelected();
				var input = $('#id_identificador');
				
				if(aSelectedTrs.length !== 0){
	            	input.val(aSelectedTrs[0].cells[0].innerText);
					centrarMapa(aSelectedTrs[0].cells[3].innerText,aSelectedTrs[0].cells[4].innerText);
				}
				else
					input.val('');
				});
		} );
</script>

<div class="row-fluid pagination-centered">
  	{% if error %} <div>Error: {{ error }}</div>{% endif %}
	<div class="span8">
		<div id="lista">
		    {% if stopList %}
	  		<table id="stopList" class="table table-striped table-bordered">
	  			<thead>
	  				<tr>
	  					<th>Orden</th>
	  					<th>Calle</th>
	  					<th>Interseccion</th>
	  					<th style="display:none">Latitud</th>
	  					<th style="display:none">Longitud</th>
	  					<th>Sentido</th>
					</tr>
				</thead>
	  			<tbody>	
		  		{% for stop in stopList %}
		  			<tr>
		  				<td>{{ stop.orden }}</td>
	  					<td>{{ stop.calle1 }}</td>
	  					<td>{{ stop.calle2 }}</td>
	  					<td style="display:none">{{ stop.latitud }}</td>
	  					<td style="display:none">{{ stop.longitud }}</td>
	  					<td>{{ stop.sentido }}</td>
					</tr>
		  		{% endfor%}
	  			</tbody>
	  		</table>
	  		{% else %}
	  		<span>No hay paradas disponibles</span>
	  		{% endif %}
		</div>
	</div>
	<div class="span3">
		{% crispy form %}
	</div>
	<div class="span11">
		<div id="mapas" style="width:100%; height:350px;">Aca va el mapa</div>
	</div>
</div>
{% endblock %}

{% block marcas %}
	document.getElementById("id_action").value = document.location.search.substr(1);
    {% if stopList %}
    {% for stop in stopList %}
    markerPosition = new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}});
    marker = new google.maps.Marker({
        map:map,
        draggable:false,
        position: markerPosition,
        title: "Parada: {{ stop.calle1 }} {% if stop.calle2 != '' %}& {{ stop.calle2 }}{% endif %}({{ stop.sentido }})",
        {% if stop.paradaactiva %}
        icon: markerImage
        {% else %}
        icon: markerImage2
        {% endif%}
    });
    limits.extend(markerPosition);    
    {% endfor %}
    
    var flightPlanCoordinates = [
      {% for stop in stopList %}
	    new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
      {% endfor %}
	];
	var flightPath = new google.maps.Polyline({
	    path: flightPlanCoordinates,
	    strokeColor: "#FF0000",
	    strokeOpacity: 1.0,
	    strokeWeight: 2
	});

 	flightPath.setMap(map);
    {% endif %}   
{% endblock %}
